<template>
    <!--<div id="Swipers">-->
        <!--<swiper :options="swiperOption" ref="mySwiper" v-show="SwiperContent.cycleImgs && SwiperContent.cycleImgs.length > 0">-->
            <!--<swiper-slide  v-for="(cycleImg,index) in SwiperContent.cycleImgs" :key="index" >-->
               <!--<div class="swiper-slide">-->
                    <!--<img v-if="isFullUrl" class="width-full booking-item-top-img" :src="cycleImg"/>-->
                    <!--<img v-if="!isFullUrl" class="width-full booking-item-top-img" :src="systemImgServerCommon(cycleImg)"/>-->
                <!--</div>-->
            <!--</swiper-slide>-->
            <!--<div class="swiper-pagination" slot="pagination"></div>-->
        <!--</swiper>-->
    <!--</div>-->
    <!--3D轮播图-->
    <div class="banner swiper3d-banner">
        <section id="dg-container" class="dg-container" v-if="SwiperContent.cycleImgs && SwiperContent.cycleImgs.length > 0">
            <div class="dg-wrapper">
                <a href="javascript:;"  v-for="(cycleImg,index) in SwiperContent.cycleImgs" :key="index">
                    <img :src="systemImgServerCommon(cycleImg)">
                </a>
            </div>
            <ol class="button" id="lightButton">
            </ol>
            <!--<template v-if="item.showVideo">-->
            <!--<video-components v-bind:item="item"></video-components>-->
            <!--</template>-->
        </section>
    </div>
    <!--3D轮播图end-->
</template>
<script>
    import  { swiper, swiperSlide }   from 'vue-awesome-swiper'
    import Carrouse from '../../../../static/js/carrousel'
    export default {
        name: 'Swipers',
        props: {
            SwiperContent: {
                type: Object
            },
            isFullUrl:{
                type:Boolean
            }
        },
        data() {
            return {
            }
        },
        mounted(){
            // this.SwiperContent.cycleImgs = ['item/2018118_offline/527685973100.jpg','item/2018118_offline/527685973100.jpg','item/2018118_offline/527685973100.jpg']
            Carrouse.loadInit();
            let bool = false;//20180619 sky
            //轮播图的点
            let swiperLength = $('.dg-wrapper a').length;
            for (let swiperI = 0; swiperI < swiperLength; swiperI++) {
                $('#lightButton').append("<li index=" + swiperI + "></li>")
            }
            //页面里面控制轮播图参数的js
            $('#dg-container').carrousel({
                current: 0,
                autoplay: true,
                interval: 5000
            });
        },
    }

</script>
<style lang="scss" scoped>
    @import url($css_root + 'css/swiper.min.css');
    .swiper-pagination-bullet-active{
        width: 16px;
        background-color: #fe4b4b;
    }
    .swiper-slide{
        height: 3.75rem;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
</style>